<template>
  <n-space>
    <div class="mainLog">
      <!-- <video class="video-background" preload="auto" loop playsinline autoplay src="../../assets/border/bg.mp4"
        tabindex="-1" muted>
      </video> -->
      
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>

      <div class="mainLog_1">
        <loginframe @messige="messige"></loginframe>
      </div>
    </div>
  </n-space>
</template>

<script lang="ts" setup>
// import loginframe from ''
import { useMessage } from 'naive-ui'
import loginframe from "./components/loginframe.vue"
const message = useMessage()
const messige = (meg) => {
  message.error(meg)
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.mainLog {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  // justify-content: center;
  flex-direction: row-reverse;
  align-items: center;
  box-sizing: border-box;
  // background-image: url("https://xunjinasd.oss-cn-hangzhou.aliyuncs.com/app/space/b4364d3f41e14370887dba41df6ee239_u0_state0.jpg");
  // background-image: url("https://https://files.axshare.com/gsc/N5QUWL/7d/07/48/7d0748b8339c4eaf8e277df077b94628/images/%E7%99%BB%E5%BD%95%E9%A1%B5/u1_state0.jpg?pageId=9643401a-7325-4da8-a55b-8ed723e2a6c3");
  // background-image: url("../../assets/border/2123.gif_wh860.gif");
  background-size: 100% 100%;
  overflow: hidden;
  // border: 1px solid red;

  .video-background {
    position: absolute;
    left: 50%;
    top: 50%;
    /*保证视频内容始终居中*/
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /*保证视频充满屏幕*/
    object-fit: cover;
    min-height: 800px;
  }

  .mainLog_1 {
    // border: 1px solid red;
    position: absolute;
  }
  .wave {
    // background-color: #ff191b;
    background-color: #3A3F4F;
    width: 200vw;
    height: 200vw;
    opacity: 0.4;
    position: absolute;
    top: -75vw;
    // left: -55vw;
    left: 50%;
    // top: 60%;
    margin-left: -100vw;
    // margin-top: -100vw;
    margin-top: -100vw;
    // margin-left: -100vw;
    border-radius: 43%;
    // border-radius: 30%;

    animation: rotate 9000ms infinite linear;

    &:nth-child(1) {
      animation: rotate 12000ms infinite linear;
    }

    &:nth-child(2) {
      animation: rotate 15000ms infinite linear;
      opacity: 0.1;
      background-color: #777;
    }
  }


  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}

</style>